<template>
  <div class="context">
    <div class="context-top">
      <div class="left-tab">
        <div v-for="(item, index) in lefttab" :id="item.id" :key="index" :class="isinclass == item.id ? 'btn-tab bg-black' : 'btn-tab'" @click="onleft(item)">{{ item.name }}</div>
      </div>
      <!-- 自选列表-->
      <div class="info-listuser" v-if="isinclass == 1">
        <div class="list-border">
          <div class="quotes">
            <myblack v-if="quotes"></myblack>
            <mylight v-if="!quotes"></mylight>
          </div>
        </div>
      </div>
      <!-- 行情列表-->
      <div class="info-list" v-if="isinclass == 2">
        <div class="list-border">
          <div class="quotes">
            <internationalblack v-if="quotes"></internationalblack>
            <internationallight v-if="!quotes"></internationallight>
          </div>
        </div>
        <div class="quotes_tab">
          <div v-for="(item, index) in symbollist" :key="index" @click="ontabli(item, index)" class="tab-li">
            <div :class="listinclass == index ? 'tabname bg-black' : 'tabname'">{{ item.title }}</div>
            <div class="tabline"></div>
          </div>
        </div>
      </div>
      <!-- 新闻资讯-->
      <div class="info-new" v-if="isinclass == 3">
        <iframe
          frameborder="0"
          width="100%"
          height="100%"
          scrolling="yes"
          security="restricted"
          sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
          src="https://www.jin10.com/example/jin10.com.html?fontSize=16px&backgroundColor=ffffff&color=000"
        ></iframe>
      </div>
      <!-- K线-->
      <div class="info-kline" v-if="isinclass == 4"><kline></kline></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import internationalblack from './context/internationalpage/internationalblack.vue'; //行情黑色效果
import internationallight from './context/internationalpage/internationallight.vue'; //行情亮色效果
import myblack from './context/mypage/myblack.vue'; //自选黑色效果
import mylight from './context/mypage/mylight.vue'; //自选亮色效果
import kline from '@/components/kline.vue';
export default {
  components: { kline, internationalblack, internationallight, myblack, mylight },
  computed: mapState({
    select: state => state.trade.select,
    /* 当前选中股指 */
    symbol: state => state.trade.symbol,
    /* 全部行情 */
    symbos: state => state.trade.symbos,
    /* 当前页面显示杨青 */
    ticket: state => state.trade.ticket,
    /* 推送数据 */
    changecolor: state => state.changecolor,
    /* 变换颜色主题 */
    lefttablist: state => state.isinclass
    /* 控制左侧面板显示 */
  }),
  watch: {
    symbol(val) {
      // console.log(val)
      for (let i in val) {
        this.symbollist.push(val[i]);
      }
      this.listinclass = 0;
      this.$store.commit('trade/setSymbos', this.symbollist[0]);
    },
    symbos(val) {
      // console.log(val)
    },
    select(val) {
      // console.log(val)
    },
    changecolor(val) {
      this.quotes = val;
    },
    /* 控制左侧面板显示*/
    lefttablist(val) {
      this.isinclass = val;
      if (val == 2) {
        this.listinclass = 0;
      }
    }
  },
  data() {
    return {
      quotes: true,
      lefttab: [
        {
          name: '我的自选',
          id: 1
        },
        {
          name: '国际板块',
          id: 2
        },
        // {
        //   name: '新闻资讯',
        //   id: 3
        // }
      ],
      isinclass: 2, //控制左侧切换
      listinclass: -1, //底部选项卡
      symbollist: [] /* 全部静态行情 */
    };
  },
  mounted() {
    for (let i in this.symbol) {
      this.symbollist.push(this.symbol[i]);
    }
    // console.log(this.symbol);
    if (this.symbollist[0] == undefined) {
      this.listinclass = -1;
    } else {
      this.listinclass = 0;
    }
  },
  methods: {
    onleft(item) {
      // console.log(item);
      // console.log(this.symbos);
      this.listinclass = 0;
      this.isinclass = item.id;
      this.$store.commit('set', {
        isinclass: this.isinclass
      });
      this.$store.commit('trade/setSymbos', this.symbos.symbols);
    },
    ontabli(item, index) {
      this.listinclass = index;
      this.$store.commit('trade/setSymbos', item);
      this.$store.commit('trade/select', item.symbols[0]);
      // console.log(this.$store.state.trade);
    }
  }
};
</script>

<style scoped lang="less">
.context {
  width: 100%;
  height: 100%;

  .context-top {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;

    .left-tab {
      width: 25px;
      height: 100%;
      overflow: hidden;
      background-color: #efefef;

      .btn-tab {
        width: 22px;
        height: 90px;
        margin-left: 3px;
        background-color: #f2f2eb;
        border-bottom-left-radius: 15px;
        border: #4b4b4b solid 1px;
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        padding-top: 5px;
        cursor: default;
      }

      /* 背景色设置*/
      .btn-tab.bg-black {
        background: #333;
        color: #fff;
      }

      .btn-tab:hover {
        background: #333;
        color: #fff;
      }
    }
  }

  .info-list {
    width: calc(100% - 25px);
    background: #000000;
    height: 100%;
    overflow:hidden;
    .list-border {
      width: 100%;
      height: 100%;
      // overflow-x: auto;
      // overflow-y: hidden;

      .quotes {
        width: 100%;
        height: 100%;
        // min-width: 1500px;
      }
    }

    .quotes_tab {

      .tab-li {
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .tabname {
          padding: 0 10px;
          height: 20px;
          color: #000000;
        }

        .tabname.bg-black {
          background: #000;
          color: #fff;
        }

        .tabname:hover {
          background: #000;
          color: #fff;
        }

        .tabline {
          width: 1px;
          height: 20px;
          background: #333;
        }
      }
    }
  }

  .info-listuser {
    width: calc(100% - 25px);
    background: #000000;
    height: 100%;
    overflow:hidden;
    .list-border {
      width: 100%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;

      .quotes {
        width: 100%;
        height: 100%;
        min-width: 1500px;
      }
    }
  }

  .info-new {
    width: calc(100% - 25px);
    background: #000000;
    height: 100%;
  }

  .info-kline {
    width: calc(100vw - 25px);
    background: #000000;
    height: 100%;
  }
}
</style>
